@import "common.scss";

@function pr($p){
    @return $p/75+rem;
}
    .top{
        display: flex;
        width: 100%;
        height: pr(100);
        align-items: center;
        justify-content: space-between;
        padding: pr(20);
    
        background-color:#ff841d; 
        
        img{
            width: 100%;
        }
        .logo{
            width: pr(370);
        }
        .app{
            width: pr(68);
        }
    }

    .search{
        display: flex;
        width: 100%;
        height: pr(100);
        align-items: center;
        justify-content: space-between;
        padding: pr(10);
        background-color: #fff;
        .searchtext{
            flex: 1;
            input{
                border-radius: pr(40);
                outline-style: none;
                border: none;
                margin-bottom: 0;
            }
        }
        .searchbtn{
            padding-left: pr(10);
            flex-basis: pr(120);
            input{
                background-color: #ff841d;
                border-radius: pr(40);
                outline-style: none;
                border: none;
                color: white;
            }
        }
    }

    .nav{  
        border-top: 1px solid #ccc;
        width: 100%;
        height: pr(360);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
        padding: pr(40) 0;
        overflow: hidden;

        &.active{
            height: pr(550);
        }

        a{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 25%;
            img{
                width: pr(100);
            } 
            p{
                color: #5a5a5a;
            }
        }
    }

    .probar{
        display: flex;
        width: 100%;
        height: pr(70);
        align-items: center;
        justify-content: space-between;
        padding: pr(20);
    
        background-color:#ffa126; 
        span{
            color: white;
            font-weight: bold;
            font-size: pr(40);
        }
        img{
            width: pr(40);
        }
    }

    .product{
        background-color: white;
        li{
            display: flex;
            flex-direction: column;
            a{
                padding: pr(10) 0;
                display: flex;
                justify-content: space-around;
                border-bottom: 1px solid #ddd;
                padding: pr(30);
                .left{
                    flex-basis: pr(200);
                    height: pr(200);
                    img{
                        width: pr(200);
                        height: pr(200);
                    }
                }
                .right{
                    padding-left: pr(20);
                    flex: 1;
                    height: pr(200);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .title{
                        margin-top: pr(20);
                        color: black;
                        font-size: pr(26);
                        span{
                            color: orange;
                        }
                    }
                    .detail{
                        display: flex;
                        justify-content: space-between;
                        span{
                            font-size: pr(24);
                            color: #999;
                        }
                        .comment{
                            img{
                                display: inline-block;
                                height: pr(26);
                            }
                        }
                    
                    }
                }
            }
        }
    }

   .saveMoney{
       width: 100%;
       height: pr(64);
       text-align: center;
       margin-bottom: pr(30);
       background-color: #f2f2f2;
       a{
           display: block;
           margin: pr(20) pr(30);
           height: pr(64);
           line-height: pr(64);
           border: 1px solid #ddd;
           background-image: linear-gradient(#fff,#f4f4f4);
           font-size: pr(26);
           color: black;
           border-radius: pr(10);
       }
   }

   .foot{
       width: 100%;
       height:pr(200);
       margin-top: pr(20);
       background-color: #efefef;
       .footop{
           border-top: 1px solid #ddd;
           border-bottom: 1px solid #ddd;
           height: pr(68);
           line-height: pr(68);
           display: flex;
           justify-content: space-around;
           align-items: center;
           text-align: center;
           a{
               color: black;
               font-size: pr(28);
               width: 30%;
               border-right: 1px solid #ddd;
               height: 100%;
               img{
                display: inline-block;
                width: pr(30);
               }
           }
       }
       .footer{
            text-align: center;
            margin: 0 auto;
            p{
                font-size: pr(24);
                color: #5a5a5a;
                margin-bottom: 0;
                &:nth-child(1){
                    margin-top: pr(20);
                }
                span{
                    color: red;
                }
            }
       }
   }

   